<template>
	<view>
		<TopNav title="监控画面"></TopNav>
		<video class="full-width" :src="camera.url" autoplay></video>
		<!-- <live-player ref='player' class="full-width" mode="live"
		:src="camera.url"
		:minCache="0.2"
		:maxCache="0.8"
		autoplay
		></live-player> -->
		<!-- <live-player class="full-width" ref='player' src="http://39.108.95.19:18000/flv/live/34020000001320000001_34020000001320000001_0200000001.flv" autoplay></live-player> -->
		<view class="bg-white padding flex align-center justify-between ">
			<text>{{camera.name}}</text>
		</view>
		<ptz :device-id="camera.id"></ptz>
	</view>
</template>

<script>
	import ptz from './ptz'
	import {
		getCameraDeviceDetail,
		getKeepCameraLive
	} from '@/api/mine/equipment'
	export default {
		components:{
			ptz
		},
		data() {
			return {
				camera:{
					
				},
				deviceId:undefined,
				pondId:undefined,
				keepLiveInterval:undefined
			};
		},
		onLoad(query) {
			console.log(query)
			this.deviceId = query.deviceId
			this.pondId = query.pondId
			this.getCameraInfo()
		},
		methods:{
			clearInterval(){
				if(this.keepLiveInterval){
					clearInterval(this.keepLiveInterval)
					this.keepLiveInterval = undefined
				}
			},
			getCameraInfo(){
				getCameraDeviceDetail({deviceId:this.deviceId,pondId:this.pondId,protocol:'HLS',type:''}).then(res=>{
					this.camera = res.data
					this.camera.url = this.camera.url.replace("https://cvr.shudatech.cn/","http://39.108.95.19:18000/")
					setTimeout(()=>{
						this.getPlayUrl()
					},5000)
				})
			},
			//获取直播地址
			getPlayUrl(){
				getKeepCameraLive({deviceId:this.deviceId,protocol:"HLS",type:"keeplive"}).then(res=>{
					this.url = res.data
					if(this.keepLiveInterval){
						clearInterval(this.keepLiveInterval)
						this.keepLiveInterval = null
					}
					//保活视频流
					this.keepLiveInterval = setInterval(()=>{
						this.getPlayUrl()
					},1000*25)
				})
			},
		}
	}
</script>

<style lang="scss">
</style>
